<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     	margin:50px;
     }
   </style>
</head>
<body> 
	 <div class="container"  id="app" >
	    <div class="panel panel-default">
	         <div class="panel-heading">学习Vue</div>
			  <div class="panel-body">
			   			     <table class="table table-bordered" v-for="tablevalue in table">
				   			     <tbody>
				   			       <tr v-for="(trvalue,index) in tablevalue"  v-bind:class="trvalue == '提莫' ? 'red' : '' ">
				   			             <td>{{index}}</td><td >{{trvalue}}</td>
				   			       </tr>
				   			     </tbody>
			   			     </table>
			   			 
			  </div>
		 </div>
		 
	 	 
    
		
	 </div>
</body>
</html>
<script>
    var app =  new Vue({
    	el: "#app",
    	data : {
    		table : [],
            flag : true
    	},
    });
  
    $.ajax({
        "url":"vipjson2.json",          //发送地址 从数据库获取数据
        "type":"post",            //发送方式
        "dataType":"JSON",
        "success":function(response,status,xhr){       //返回的页面上的数据 获取数据库json数据 使用vue.js遍历在页面上
            for(var k in response){
            	app.table.push(response[k]);  //把异步获取的对象添加到Vue的data里 这里添加5个对象 {xxx}{xxx}{xxx}{xxx}{xxx}
            	console.log(response[k]); //可以在火狐里面观察下对象
            }
            Vue.nextTick(function () { //当Vue数据渲染完成时触发
            	 $(".red").parents("table").css("color","red");  //变红
            	 $(".red").parents("table").prependTo('.panel-body'); //移动节点
               })
        },
        "error":function(xhr){
          alert(xhr.status + xhr.statusText);
        },
    });
    

  
   
    
</script>


